<template>
	<view class="uni-container">
		<view class="productImg">
			<image class="imagePng" :src="url"/>
		</view>
		<view class="detailCard">
			<view class="buttonCard">
				<view class="price">￥<text>{{number}}</text></view>
				<view class="floatR">
					<image src="http://localhost:8080/static/deleteButton.png" @click="deleteFun" />
					<view>{{value}}</view>
					<image src="http://localhost:8080/static/addButton.png" @click="addFun"></image>
				</view>
			</view>
			<view class="introduceCard">
				<view class="title">{{title}}</view>
				<view class="introduce">{{introduce}}</view>
			</view>
			<view class="line"></view>
			<view class="tasteCard">
				<view class="tasteTitle">口味</view>
				<view class="tasteMain">
					<view class="tasteButton" v-for="(item,index) in taste" :key="index">
						<button @click="clickButton(item,index)" :class="index==active?'colorH':''">{{item}}</button>
					</view>
				</view>	
			</view>
			<view class="shopCard" @click='retunFunc'>
				<view class="shopButton">加入购物车</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '红烧牛肉',
				introduce:'150牛肉',
				taste: ["微辣","不辣","微微辣"],
				number: 50,
				url: 'http://localhost:8080/static/lbt3.png',
				value: 0,
				active:0
			};
		},
		methods:{
			// 减少
			deleteFun() {
				if (this.value == 0) {
					return
				} else {
					this.value -= 1
				}
			},
			// 增加
			addFun() {
				this.value += 1
			},
			// 按钮点击
			clickButton(item,index){
				this.active=index
			},
			// 加入购物车
			retunFunc(){
				uni.switchTab({
					url: '/pages/tabBar/component/component'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.productImg{
		width: 100hv;
		height: 500rpx;
		position: relative;
		z-index: 0;
		margin-bottom: -50rpx;		
		image{
			width: 100%;
			height: 100%;
		}
	}
	.colorH{
		color:#fff;
		background:#FF922C !important;
	}
	.detailCard{
		width: 100%;
		height: calc(100vh - 500rpx);
		position: relative;
		z-index: 1;		
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		.buttonCard {
			color: #EC3636;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 40rpx 40rpx 20rpx 40rpx;
			text{
				font-size: 24px;
			}
			.floatR {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 180rpx;
				height: 50rpx;
				
				image {
					width: 40rpx;
					height: 40rpx;
					cursor: pointer;
					margin-top: 8rpx;
				}
		
				view {
					line-height: 40rpx;
					margin-top: 8rpx;
					font-size: 16px;
					// flex:2
				}
			}
		}
	}
	.line{
		margin: 15rpx auto;
		height: 2rpx;
		width: 90%;
		background-color: #EAEAEA;
	}
	.introduceCard{
		padding:0 40rpx;
		.title{
			font-weight: 800;
			font-size: 18px;
		}
		.introduce{
			color: #666666;
			font-size: 14px;
		}
	}
	.tasteCard{
		padding: 10rpx 40rpx;
		.tasteMain{
			display: flex;
		}
		.tasteButton{
			width: 100rpx;
			margin: 15rpx;
			button{
				height: 60rpx;
				line-height: 60rpx;
				padding: 0;
				font-size: 14px;
				// letter-spacing:-1px;
				white-space: nowrap;
				background: #EEEEEE;
			}
		}
	}
	.shopCard{
		height: 150rpx;
		width: 100%;
		background: #ffffff;
		position: absolute;
		bottom: 0rpx;
		box-shadow: 0px 4px 10px 3px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		.shopButton{
			width: 85%;
			height: 90rpx;
			background: #FF922C;
			margin: 0 auto;
			text-align: center;
			line-height: 90rpx;
			border-radius: 45rpx;
			color: #ffffff;
			font-weight: 800;
			font-size: 16px;
		}
	}
</style>
